<template>
    <div class="app-container">
        <!-- <h2>控制台</h2> -->
        <el-row :gutter="15">
            <el-col :md="8" :sm="24">
                <el-card shadow="hover" class="text-large chart-card">
                    <span class="text-mini title-tip">欢迎您： </span>
                    <el-avatar shape="circle" style="vertical-align: middle; margin: 0 5px" size="small" :src="avatar"></el-avatar>{{ name | hello }}
                </el-card>
            </el-col>
            <el-col :md="8" :sm="24">
                <el-card shadow="hover" class="text-large chart-card"
                    ><span class="text-mini title-tip">美国时间</span>
                    {{ time | parseTime('y-m-d h:i:s 星期a') }}
                </el-card>
            </el-col>
            <el-col :md="8" :sm="24">
                <el-card shadow="hover" class="text-large chart-card">
                    <span class="text-mini title-tip">所属角色组</span>
                    {{ groups_name || '暂无' }}
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="15">
            <el-col :md="6" :sm="12">
                <el-card class="chart-card" shadow="always">
                    <div slot="header">
                        <span>今日订单销售额$</span>
                        <!-- <el-tooltip content="当前销售额" placement="top">
                            <i class="el-icon-question pull-right" style="cursor: pointer"> </i>
                        </el-tooltip> -->
                    </div>
                    <div class="chart-card-num">{{arr.total_amounts}}</div>
                    <div class="chart-card-content" style="padding-top: 18px">
                        <span class="mr10"><span>运费折扣:${{arr.shipping_fee_platform_discount}}</span></span>
                        <span class="mr10">
                            <span>平台折扣:${{arr.platform_discount}}</span>
                        </span>
                    </div>
                    <el-divider class="mt5 mb5" />
                    <div class="chart-card-text">昨日订单销售额:${{arr.total_amountsy}}</div>
                </el-card>
            </el-col>
            <el-col :md="6" :sm="12">
                <el-card class="chart-card" shadow="always">
                    <div slot="header">
                        <span>今日订单量</span>
                        <!-- <el-tag type="danger" size="mini" class="pull-right">/日 </el-tag> -->
                    </div>
                    <div class="chart-card-num">{{arr.count}}</div>
                    <div class="chart-card-content">
                        <!-- <G2BarChart :chartData="test_data" :height="50" :axis="false" /> -->
                    </div>
                    <el-divider class="mt5 mb5" />
                    <div class="chart-card-text">昨日订单量:{{arr.county}}</div>
                </el-card>
            </el-col>
            <el-col :md="6" :sm="12">
                <el-card class="chart-card" shadow="always">
                    <div slot="header">
                        <span>广告消耗$</span>
                        <!-- <el-tag size="mini" class="pull-right">/月 </el-tag> -->
                    </div>
                    <div class="chart-card-num">{{arr.spend}}</div>
                    <div class="chart-card-content">
                        <!-- <G2LineChart :chartData="test_data" :height="50" :axis="false" /> -->
                    </div>
                    <el-divider class="mt5 mb5" />
                    <div class="chart-card-text">昨日广告消耗${{arr.spendy}}</div>
                </el-card>
            </el-col>
            <el-col :md="6" :sm="12">
                <el-card class="chart-card" shadow="always">
                    <div slot="header">
                        <span>今日退款$</span>
                        <!-- <el-tag type="success" size="mini" class="pull-right">运营 </el-tag> -->
                    </div>
                    <div class="chart-card-num">{{arr.total_amount_t}}</div>
                    <div class="chart-card-content" style="padding-top: 25px">
                        <!-- <span class="mr10">
                            <span>渠道A：121</span>
                        </span>
                        <span class="mr10">
                            <span>渠道B：235</span>
                        </span>
                        <span class="mr10">
                            <span>渠道C：135</span>
                        </span> -->
                    </div>
                    <el-divider class="mt5 mb5" />
                    <div class="chart-card-text">
                        <span class="mr10">
                            <!-- <span>周同比12%</span> -->
                            <!-- <i class="el-icon-caret-top text-danger" /> -->
                        </span>
                        <span class="mr10">
                            <!-- <span>日同比11%</span> -->
                            <!-- <i class="el-icon-caret-bottom text-success" /> -->
                        </span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-card shadow="always" body-style="padding:0 20px;">
            <div>
                <div class="flex justify-between align-center">
                    <el-tabs v-model="saleSearch.type">
                        <el-tab-pane label="筛选" name="saleroom" />
                    </el-tabs>
                    <div>
                        <el-radio-group @change="day_change" v-model="saleSearch.dateType" size="small" class="mr5">
                            <el-radio-button :label="0">今天</el-radio-button>
                            <el-radio-button :label="1">昨天</el-radio-button>
                            <!-- <el-radio-button :label="2">本月</el-radio-button>
                            <el-radio-button :label="3">上月</el-radio-button> -->
                        </el-radio-group>
                        <!-- <el-date-picker v-model="saleSearch.datetime" type="daterange" range-separator="至" size="small" start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels /> -->
                    </div>
                </div>
            </div>
            <el-divider class="mt5 mb5" />
            <el-row>
                <el-col :md="18" :sm="16">
                    <div class="mt10 mb10">店铺业绩</div>
                    <G2BarChart idName="c1" :chartData="sales_form" :height="350" label="sold" />
                </el-col>
                <el-col :md="6" :sm="8">
                    <div>广告消耗</div>
                    <G2DountChart idName="c2" :chartData="advertising_form" :height="350" label="sold" />
                </el-col>
            </el-row>
            <!-- <div class="mt10 mb10">SKU排行</div> -->
            <!-- <G2BarChart idName="c4" :chartData="test_data3" :height="350" label="sold" /> -->
        <!-- </el-card>

        <el-card shadow="always" body-style="padding:0 20px;" class="mt20"> -->
        <el-divider class="mt5 mb5" />
            <div class="mt10 mb10">24小时单量排行</div>
            <G2LineChart idName="c3" :chartData="hour_sales_forms" :height="350" label="sold" />
        </el-card>

    </div>
</template>

<script>
import G2BarChart from '@/views/dashboard/G2BarChart'
import G2LineChart from '@/views/dashboard/G2LineChart'
import G2BreadChart from '@/views/dashboard/G2BreadChart'
import G2DountChart from '@/views/dashboard/G2DountChart'
import { mapGetters } from 'vuex'
export default {
    name: 'Index',
    components: { G2BarChart, G2LineChart, G2BreadChart, G2DountChart },
    data() {
        return {
            arr: {
                total_amounts:0,
                count:0,
                total_amountsy:0,
                county:0,
                shipping_fee_platform_discount:0,
                platform_discount:0,
                spend:0,
                spendy:0,
                total_amount_t:0,
            },
            sales_form: [],
            advertising_form: [],
            hour_sales_forms: [],
            chartText: { saleroom: '销售额$'},
            saleSearch: {
                type: 'saleroom',
                dateType: 0,
                datetime: '',
            },
            saleroomRankData: [],
            time: 0,
        }
    },
    computed: {
        ...mapGetters(['avatar', 'name', 'groups_name']),
    },
    created() {
        this.now()
        this.day_change(1);
    },
    methods: {
        day_change(val) {
            this.saleSearch.datetime = '';
            this.handleSkuFind();
        },
        async handleSkuFind() {
            let response = await this.request.post('/admin/datapanel/dashboard_index', { 
                day_changes : this.saleSearch.dateType,
            })
            this.arr = response.data
            this.sales_form = response.data.sales_form
            this.advertising_form = response.data.advertising_form
            this.hour_sales_forms = response.data.hour_sales_forms
        },
        // 
        now() {
            this.time = new Date().getTime() - 16 * 3600 * 1000;
            setInterval(() => {
                this.time = new Date().getTime() - 16 * 3600 * 1000;
            }, 1000)
        },
    },
}
</script>

<style lang="scss" scoped>
.app-container {
    background: #f0f2f5;
    .title-tip {
        color: #909399;
        margin: 0;
        display: block;
    }
    /* 统计卡片 */
    .chart-card {
        color: #606266;
        margin-bottom: 15px;
    }
    .chart-card-num {
        font-size: 30px;
    }

    .chart-card-content {
        height: 50px;
        box-sizing: border-box;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .chart-card-text {
        font-size: 13px;
    }
}
</style>
